<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>管理员账号</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../styles/common.css" />

</head>

<body>
<!--<h1>管理员账号管理</h1>-->
<div class="app" id="app">
    <!--    <el-container style="height: 750px; ">-->
    <!--    有一条细细的白线-->

    <!--1.主要内容-->
    <el-container style="height: 750px; border: 1px solid #eee">
        <el-container>
            <div style="width: 100%;position: relative">
                <div style=";margin-bottom: 25px;">
                    <el-input
                            placeholder="请输入员工姓名"
                            clearable
                            style="width: 20%; "
                            prefix-icon="el-icon-search"
                            v-model="adminQuery.name"
                    >
                    </el-input>
                    <el-button @click="getAll()" class="dalfBut">查询</el-button>
                    <el-button type="warning" style="float: right" @click="addAndUpdate(null,1)">新增员工</el-button>
                </div>
                <el-table   size="medium" current-row-key="id"  :data="dataList" stripe highlight-current-row>

                    <el-table-column type="index" align="center" label="序号"></el-table-column>

                    <el-table-column prop="name" label="姓名" align="center"></el-table-column>
                    <el-table-column prop="username" label="用户名" align="center"></el-table-column>
                    <el-table-column prop="password" label="密码" align="center"></el-table-column>
                    <el-table-column prop="phone" label="手机号" align="center"></el-table-column>
                    <el-table-column prop="sex" label="性别" align="center"></el-table-column>
                    <el-table-column prop="idNumber" label="身份证号" align="center"></el-table-column>
                    <el-table-column prop="status"  label="状态" align="center"></el-table-column>

                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button type="primary" style="float: left" size="mini" @click="addAndUpdate(scope.row,2)">编辑</el-button>
                            <el-button type="danger" style="float: right;margin-top: -30px" size="mini" @click="forbiddenAdmin(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <!--分页组件-->
                <el-pagination
                        class="pagination"
                        @current-change="handleCurrentChange"
                        :current-page="pagination.currentPage"
                        :page-size="pagination.pageSize"
                        layout="total, prev, pager, next, jumper"
                        :total="pagination.total">
                </el-pagination>
            </div>

        </el-container>
    </el-container>

    <!--2.新增修改 员工弹框-->
    <el-dialog :title="title" style="height: 750px"  :visible.sync="adminAddShow">
        <el-form :model="formData_admin" :rules="rules" ref="formData_admin" label-width="100px" class="demo-formData_admin">
            <el-form-item  label="账号：" prop="username">
                <el-input v-model="formData_admin.username"></el-input>
            </el-form-item>

            <el-form-item  label="员工姓名：" prop="name">
                <el-input v-model="formData_admin.name"></el-input>
            </el-form-item>

            <el-form-item  label="手机号：" prop="phone">
                <el-input v-model="formData_admin.phone"></el-input>
            </el-form-item>

            <el-form-item  label="性别：" prop="sex">
                <el-radio-group v-model="formData_admin.sex">
                    <el-radio label="男"></el-radio>
                    <el-radio label="女"></el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item  label="省份证号：" prop="idNumber">
                <el-input v-model="formData_admin.idNumber"></el-input>
            </el-form-item>
            <el-form-item  label="状态" prop="status">
                <template>
                    <el-select v-model="formData_admin.status" placeholder="请选择">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </template>
            </el-form-item>


            <el-form-item>
                <el-button type="primary" @click="submitForm">{{sureButton}}</el-button>
                <el-button @click="resetForm('formData_admin')">全部重置</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>


<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../plugins/axios/axios.min.js"></script>
<script src="../js/request.js"></script>


<script>


    new Vue({
        el: '#app',
        data:{
//1.主页面内容
            //显示数据
            dataList:[],
            tableData:[],

            //分页插件
            pagination: {//分页相关模型数据 1
                currentPage: 1,//当前页码1
                pageSize:5,//每页显示的记录数1
                total:0,//总记录数1
            },

            //管理员搜索内容1
            adminQuery:{
                name:""
            },

//2.弹框内容
            adminAddShow: false,
            title:"",   //弹框标题
            sureButton:"",   //弹框确定按钮 文字

            //是否禁用（状态）
            options: [{
                value: '正常',
                label: '正常'
            },{
                value: '禁用',
                label: '禁用'

            },],

            //弹框表单
            formData_admin: {
                id:"",
            },
            //弹框表单（input）校验
            rules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 3, max: 7, message: '长度在 3 到 7 个字符', trigger: 'blur' }
                ],
                name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                phone: [
                    { required: true, message: '请输入电话号码', trigger: 'blur' },
                    { min: 3, max: 11, message: '长度在 3 到 11 个字符', trigger: 'blur' }
                ],
                sex: [
                    { required: true, message: '请选择性别', trigger: 'blur' },
                    // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                idNumber: [
                    { required: true, message: '请输入省份证号', trigger: 'blur' },
                    { min: 0, max: 18, message: '请输入18位的省份证号', trigger: 'blur' }
                ],
                status: [
                    { required: true, message: '请选择账号状态', trigger: 'blur' },
                    // { min: 0, max: 18, message: '请输入18位的省份证号', trigger: 'blur' }
                ],
            }

        },
        created() {
            this.getAll();
        },

        methods: {

            resetForm(formName) {
                this.$refs[formName].resetFields();
            },

            //1. 新增/修改表单 弹框
            addAndUpdate(row,title){
                if (title==1){      //1:"新增员工" ;2:"修改员工信息"
                    this.title="新增员工"
                    this.sureButton="立即新增"

                }else if (title==2){
                    this.title="修改员工信息"
                    this.sureButton="立即修改"
                    console.log("测试1："+this.formData_admin)

                    axios.get("/admins/"+row.id).then((res)=>{     //修改数据回显
                        if(res.data.data!=null){
                            console.log("res.data.data:")
                            console.log(res.data.data)
                            this.formData_admin=res.data.data;
                            this.adminAddShow=true;
                        }
                    })

                }
                this.formData_admin={}
                this.adminAddShow=true
            },
            //2.提交 新增/修改表单
            submitForm() {
                // alert("提交表单："+this.title)
                this.$refs.formData_admin.validate((valid)=>{
                    if (valid){
                        if (this.title=="新增员工"){          //1:"新增员工" ;2:"修改员工信息"
                            axios.post("/admins/add",this.formData_admin).then((res)=>{
                                if(res.data.code){
                                    console.log(res.data.code);
                                    this.$message.success(res.data.msg);
                                }else {
                                    this.$message.error(res.data.msg);
                                }
                            }).finally(()=>{
                                this.getAll();
                                this.adminAddShow=false;
                            })
                        }else if (this.title=="修改员工信息"){
                            console.log("测试1.2："+this.formData_admin)

                            axios.put("/admins",this.formData_admin).then((res)=>{
                                console.log("测试1.3："+this.formData_admin)

                                if (res.data.code){
                                    this.$message.success(res.data.msg);
                                }
                            }).finally(()=>{
                                this.getAll();
                                this.adminAddShow=false;
                            })
                        }
                    }else {

                    }
                })

            },

            //3.删除员工
            forbiddenAdmin(row) {
                this.$confirm("此操作删除当员工信息，是否继续?","提醒",{type: 'info'
                }).then(()=>{

                    axios.delete("/admins/"+row.id).then((res)=>{
                        this.$message.success(res.data.msg);
                    }).finally(()=>{
                        this.getAll()
                    })

                }).catch(()=>{
                    //取消删除
                    this.$message.info("取消删除操作")
                })

            },

            getAll(){
                parent ="?name="+this.adminQuery.name;
                // alert(parent)
                axios.get("/admins/"+this.pagination.currentPage+"/"+this.pagination.pageSize+parent).then((res)=>{

                    this.dataList=res.data.data.records
                    console.log("Admin:res.data.data.records:")
                    console.log(res.data)
                    this.pagination.total=res.data.data.total
                    this.adminQuery.name=""
                })
            },
            //切换页码
            handleCurrentChange(currentPage) {
                this.pagination.currentPage=currentPage;
                this.getAll();
            },

        }
    })
</script>
</body>
</html>
